import React from 'react'
import './zhmComp.css'
import { Modal, List, Button } from 'antd-mobile';
import img from '../../images/aa.jpg'
import { withRouter } from "react-router-dom";



class ZhmComp extends React.Component {
    constructor() {
        super()
        this.state = {
            colorValue: '',
            activeValue: '',
            modal2: false,
            modal1: false,
            clickNum: '',
            tableData: []
        }
    }

    showModal = key => (e) => {
        e.preventDefault(); // 修复 Android 上点击穿透
        this.setState({
            [key]: true,
        });
    }
    onClose = key => () => {
        this.setState({
            [key]: false,
        });
    }

    changeText = (e) => {
        console.log(e.target.innerText)
        let text = e.target.innerText
        this.setState({
            clickNum: text
        })

    }
    tiaozhuan = () => {
        console.log(123)
        this.props.history.push({ pathname: "/Home/ShopDetails/" + 2 });

    }
    render() {
        console.log(this.props.tableData);

        this.state.tableData = this.props.tableData
        return (
            <div id='ZhmComp'>
                <div className='select'>
                    <Button onClick={this.showModal('modal2')} className='btn1'>店铺评价<i className="iconfont icon-jiantouarrow486"></i></Button>
                    <Modal
                        popup
                        visible={this.state.modal2}
                        onClose={this.onClose('modal2')}
                        animationType="slide-up"

                    >
                        <List renderHeader={() => <div>店铺评价</div>} className="popup-list" >
                            {['按销售量从高到低', '按价格从低到高', '按评价从高到低'].map((i, index) => (
                                <List.Item key={index} onClick={this.changeText} style={{ background: this.state.clickNum === i ? '#FF8533' : '' }}>{i}</List.Item>

                            ))

                            }
                            <List.Item>
                                <Button type="primary" onClick={this.onClose('modal2')}>确定</Button>
                            </List.Item>
                        </List>
                    </Modal>
                    <Button onClick={this.showModal('modal1')} className='btn2'>优惠活动<i className="iconfont icon-jiantouarrow486"></i></Button>
                    <Modal
                        popup
                        visible={this.state.modal1}
                        onClose={this.onClose('modal1')}
                        animationType="slide-up"

                    >
                        <List renderHeader={() => <div>优惠活动</div>} className="popup-list" >
                            {['满减', '会员折扣'].map((i, index) => (
                                <List.Item key={index} onClick={this.changeText} style={{ background: this.state.clickNum === i ? '#FF8533' : '' }}>{i}</List.Item>

                            ))

                            }
                            <List.Item>
                                <Button type="primary" onClick={this.onClose('modal1')}>确定</Button>
                            </List.Item>
                        </List>
                    </Modal>

                    {/* 列表 */}

                </div>
                { this.state.tableData.map((item, i) => {
                    return (
                        <div className='list' key={i}>
                            <div className='mylist' onClick={this.tiaozhuan}>
                                <div className='imgDiv'>
                                    <img src={img} alt="" className='img' style={{ width: '80px', height: '80px' }} />
                                    {/* <img src={require(`${item.shop_photo_url}`).default} alt="" className='img' style={{ width: '80px', height: '80px' }} /> */}
                                </div>
                                <div className='cententDiv'>
                                    <div className='top'>
                                        <p className='flute'>{item.shop_name}</p>
                                        <p className='getTime'>20分钟送达</p>
                                    </div>

                                    <div className='pinfen'>
                                        <p className='p1'>
                                            <span className='iconfont icon-pingfen1' style={{ color: 'yellow' }}></span>
                                            <span className='iconfont icon-pingfen1' style={{ color: 'yellow' }}></span>
                                            <span className='iconfont icon-pingfen1' style={{ color: 'yellow' }}></span>
                                            <span className='iconfont icon-pingfen1' style={{ color: 'yellow' }}></span>

                                            <span className='iconfont icon-pingfen'></span>
                                        </p>
                                        <p className='p2'>月售2000份</p>
                                    </div>

                                    <div className='msg'>
                                        {item.shop_status === 1 && <p>营业中</p>}
                                        {item.shop_status === 0 && <p>休息中</p>}

                                        <p>{item.shop_start_price}元起送</p>
                                        <p style={{ width: '25%' }}>{item.shop_delivery_money}元配送费</p>
                                    </div>
                                </div>
                            </div>

                        </div>
                    )
                })}


            </div>
        )
    }
}

export default withRouter(ZhmComp)